<template>
	<div class="body">
		<div class="hello">
				<div class="img">
					<div class="img1"><img src="../../../static/img/zhuce-image-1.png" alt=""></div>
					<div class="img2"><img src="../../../static/img/zhuce-image-2.png" alt=""></div>
					<div class="img3"><img src="../../../static/img/zhuce-image-3.png" alt=""></div>
				</div>
				<div class="userImg">
					<img src="../../../static/img/user.png" alt="">
					<div class="userImg_dl">&nbsp;&nbsp;注&nbsp;册</div>
					<div class="to_denglu">
						已有有账号
						<router-link to="/login">立即登录</router-link>
					</div>
					<hr class="ui_hr">
				</div>
				<div class="text">
					<div>用 &nbsp;&nbsp;户&nbsp;&nbsp;名:<input id="username" class="username" v-model="userName" placeholder="请输入用户名"></div><span id="username_span"></span><br><br>
					<div>密 &nbsp;&nbsp;码：&nbsp;&nbsp;&nbsp;<input id="password" class="password" type="password" v-model="password" placeholder="请输入密码(由数字组成)"></div><span id="password_span"></span><br><br>
					<div>确 &nbsp;认&nbsp;密&nbsp;码：&nbsp;<input id="issure" class="issure" type="password" placeholder="请再次输入密码"></div><span id="issure_span"></span><br><br>
					<div><button v-on:click="addUser">注&nbsp;&nbsp;册</button></div>
				</div>
		</div>
	</div>
</template>

<script>
  export default {
    name: 'Hello',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
        userName: '',
        password: ''
      }
    },
    methods: {
      addUser() {
		var text = '格式正确';
		var password = document.getElementById('password').value;
		var issure = document.getElementById('issure').value;
		var username = document.getElementById('username').value;
		  
		if(username == "" || username == null){
			document.getElementById('username_span').innerHTML = '用户名不能为空';
			return false
			// document.getElementById('password_span').innerHTML = '密码不能为空';
			// document.getElementById('issure_span').innerHTML = '密码不能为空';
		}else{
			document.getElementById('username_span').innerHTML = text
			if(isNaN(password) || password == "" || password == null){
				document.getElementById('password_span').innerHTML = '密码格式不正确'
				return false
			}else{
				document.getElementById('password_span').innerHTML = text
				if(password != issure || issure == "" || issure == null){
					document.getElementById('issure_span').innerHTML = "两次输入密码不一致"
					return false
				}else{
					document.getElementById('issure_span').innerHTML = text;
					alert("注册成功")
					var name = this.userName;
					var password = this.password;
					var phone = this.$route.query.phone
					console.log(phone)
					this.$http.post('http://localhost:3000/api/user/addUser', {
					  username: name,
					  password: password,
					  phone:phone
					}, {}).then((response) => { 
						console.log(response); 
						this.$router.push('/login')
					})
				}
			}
		}
        
      }
    },
	mounted(){
		
	}
  }
</script>

<style scoped>
	.body{
		position: relative;
		top: 0;
		padding-top: 80px;
		padding-bottom: 50px;
		padding-left: 200px;
		background-image: url(../../../static/img/zhuce_bj.jpg);
		background-size: 100% 100%;
	}
	button{
		width: 245px;
		height: 40px;
		margin: 20px 10px 0 20px;
		background: #00B7FF;
		font-weight: 800;
		color: #FFFFFF;
	}
	button:hover{
		cursor: pointer;
	}
	input{
		margin-left: 30px;
		height: 40px;
		width: 200px;
		border: #CACACA 1px solid;
	}
	span{
		position: absolute;
		right: 0;
		color: red;
	}
	.issure{
		margin-left: 5px;
	}
	.hello{
		width: 1080px;
		height: 500px;
		background: #fff;
		position: relative;
	}
	.img{
		position: absolute;
		width: 690px;
		height: 400px;
		margin: 50px 40px 50px 0;
		/* background-color: #CACACA; */
		float: left;
	}
	.img1{
		width: 406px;
		height: 377px;
		position: absolute;
		top: 5px;
		left: 50px;
		z-index: 1000;
	}
	.img2{
		width: 409px;
		height: 364px;
		position: absolute;
		top: 5px;
		left: 200px;
		z-index: 999;
	}
	.img3{
		width: 437px;
		height: 384px;
		position: absolute;
		top: 5px;
		left: 290px;
	}
	.userImg{
		position: absolute;
		right: 270px;
		top: 25px;
	}
	.userImg_dl{
		position: absolute;
		top: 30px;
		left: 80px;
		width: 80px;
		font-size: 24px;
	}
	.to_denglu{
		position: absolute;
		margin-top: 16px;
		margin-left: 175px;
		width: 200px;
	}
	.ui_hr{
		margin-top: 36px;
		width: 310px;
		position: absolute;
	}
	.text{
		position: absolute;
		right: 30px;
		top: 150px;
		z-index: 1000;
		width: 300px;
		height: 370px;
		float: right;
		overflow: hidden;
		/* padding-top: 100px; */
	}
	
</style>